<script setup>
import { ref } from 'vue';
import Dept from '@/views/Dept.vue';
import Clue from '@/views/Clue.vue';
import CluePool from '@/views/CluePool.vue';
import BusinessOpportunity from '@/views/BusinessOpportunity.vue';
import PublicPool from '@/views/PublicPool.vue';
import Customer from '@/views/Customer.vue';
import Course from '@/views/Course.vue';
import Activity from '@/views/Activity.vue';
import Role from '@/views/Role.vue';
import User from '@/views/User.vue';
import SystemLog from '@/views/SystemLog.vue';

// 当前激活的页面
const activePage = ref('dept');

// 切换页面
const switchPage = (pageKey) => {
  activePage.value = pageKey;
};
</script>

<template>
  <div class="app-container">
    <!-- 左侧导航 -->
    <aside class="app-sidebar">
      <div class="sidebar-header">
        <h1 class="app-title">企业管理系统</h1>
      </div>
      <nav class="app-nav">
        <ul class="nav-list">
          <!-- 线索管理模块 -->
          <li class="nav-title">线索管理</li>
          <li 
            :class="['nav-item', { active: activePage === 'clue' }]"
            @click="switchPage('clue')"
          >
            线索列表
          </li>
          <li 
            :class="['nav-item', { active: activePage === 'cluePool' }]"
            @click="switchPage('cluePool')"
          >
            线索池
          </li>
          
          <!-- 商机管理模块 -->
          <li class="nav-title">商机管理</li>
          <li 
            :class="['nav-item', { active: activePage === 'businessOpportunity' }]"
            @click="switchPage('businessOpportunity')"
          >
            商机列表
          </li>
          <li 
            :class="['nav-item', { active: activePage === 'publicPool' }]"
            @click="switchPage('publicPool')"
          >
            公海池
          </li>
          
          <!-- 资源管理模块 -->
          <li class="nav-title">资源管理</li>
          <li 
            :class="['nav-item', { active: activePage === 'customer' }]"
            @click="switchPage('customer')"
          >
            客户管理
          </li>
          <li 
            :class="['nav-item', { active: activePage === 'course' }]"
            @click="switchPage('course')"
          >
            课程管理
          </li>
          <li 
            :class="['nav-item', { active: activePage === 'activity' }]"
            @click="switchPage('activity')"
          >
            活动管理
          </li>
          
          <!-- 系统管理模块 -->
          <li class="nav-title">系统管理</li>
          <li 
            :class="['nav-item', { active: activePage === 'dept' }]"
            @click="switchPage('dept')"
          >
            部门管理
          </li>
          <li 
            :class="['nav-item', { active: activePage === 'role' }]"
            @click="switchPage('role')"
          >
            角色管理
          </li>
          <li 
            :class="['nav-item', { active: activePage === 'user' }]"
            @click="switchPage('user')"
          >
            用户管理
          </li>
          <li 
            :class="['nav-item', { active: activePage === 'systemLog' }]"
            @click="switchPage('systemLog')"
          >
            系统日志
          </li>
        </ul>
      </nav>
    </aside>
    
    <!-- 主内容区 -->
    <main class="app-main">
      <Clue v-if="activePage === 'clue'" />
      <CluePool v-else-if="activePage === 'cluePool'" />
      <BusinessOpportunity v-else-if="activePage === 'businessOpportunity'" />
      <PublicPool v-else-if="activePage === 'publicPool'" />
      <Customer v-else-if="activePage === 'customer'" />
      <Course v-else-if="activePage === 'course'" />
      <Activity v-else-if="activePage === 'activity'" />
      <Dept v-else-if="activePage === 'dept'" />
      <Role v-else-if="activePage === 'role'" />
      <User v-else-if="activePage === 'user'" />
      <SystemLog v-else-if="activePage === 'systemLog'" />
    </main>
  </div>
</template>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f0f2f5;
  color: #333;
}

.app-container {
  min-height: 100vh;
  display: flex;
  background-color: #f0f2f5;
}

/* 左侧导航栏 */
.app-sidebar {
  width: 200px;
  background-color: #1890ff;
  color: white;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.app-title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin: 0;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-title {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background-color: rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-item {
  padding: 14px 20px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  padding-left: 24px;
}

.nav-item.active {
  background-color: #fff;
  color: #1890ff;
  border-left: 4px solid #1890ff;
  padding-left: 16px;
  font-weight: 600;
  border-right: 4px solid #1890ff;
}

/* 主内容区 */
.app-main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style>
